<template>
  <div class="recommend" :style="{ '--backColor': props.backColor }">
    <el-divider :style="{ '--backColor': props.backColor }">
      更多案例
    </el-divider>
    <div class="recommend-list">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="recommend-list-item"
      >
        <div class="recommend-list-item-title" @click="godetailPage(index + 1)">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  backColor: {
    type: String,
    default: "#FFF",
  },
});
let items = reactive([
  "渠道数据采集",
  "主数据管理",
  "渠道数据清洗",
  "企业AI助手",
  "HR考勤数据汇总",
  "集团审计管理",
]);
const godetailPage = (i: number) => {
  if (i == 1) {
    router.push({
      name: "Exampleitem2",
    });
  } else if (i == 2) {
    router.push({
      name: "Exampleitem",
    });
  } else if (i == 3) {
    router.push({
      name: "Exampleitem3",
    });
  } else if (i == 4) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem4",
    });
  } else if (i == 5) {
    // 渠道数据清洗
    router.push({
      name: "Exampleitem5",
    });
  } else if (i == 6) {
    // AI分析助手
    router.push({
      name: "Exampleitem6",
    });
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-divider) {
  background-color: var(--backColor);
  height: 36px;
  margin: 0;
}
:deep(.el-divider__text) {
  font-size: 30px;
  background-color: var(--backColor);
}

.recommend {
  background-color: var(--backColor);
  color: #000;
  width: 100%;
  padding: 0 400px;
  &-list {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    &-item {
      width: 30%;
      &-title {
        color: #333;
        font-size: 20px;
        margin: 30px 0;
        border: 2px solid #0a47ed;
        border-radius: 30px;
        padding: 10px 0;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
        &:hover {
          cursor: pointer;
          color: #8d7777;
        }
      }
    }
  }
}
</style>
